<template>
	<view class="page page-member">
		<!-- 筛选 -->
		<view class="filter-bar">
			<block v-for="(item, index) in filterBar" :key="index">
				<view class="item" :class="{'active' : filterCurrent == item.id}" @click="filterList(item.id)">{{item.title}}</view>
			</block>
		</view>
		<!-- 统计 -->
		<block v-if="dataInfo">
			<view class="hr7"></view>
			<view class="member-head flex-row-between font14">
				<view>有效订单 <text class="font-assist">{{dataInfo.count}}</text> 个</view>
				<view>总佣金 <text class="font-assist">{{dataInfo.sum_coin}}</text> 纽扣币</view>
			</view>
		</block>
		<!-- 列表 -->
		<LoadMore ref="LoadMore" id="LoadMore" :token="true" :diffHeight="72" :initData="initData" @dataRefresh='dataRefresh' @infoRefresh='infoRefresh'>
			<view class="member-list">
				<view class="item" v-for="(item, index) in dataList" :key="index">
					<view class="hr7"></view>
					<view class="p p1 flex-row-between">
						<view>订单号：{{item.crsNo || item.wx_order  || item.order_no}}</view>
						<view v-if="filterCurrent == 'coinHotel'" class="font-assist">{{item.tip}}</view>
						<view v-if="filterCurrent == 'coinCard'" class="font-assist">{{item.tip}}</view>
					</view>
					<view class="p p2 flex-row-between">
						<view class="flex-row-start">
							<view class="photo bg-cover" :style="{backgroundImage: 'url(' + item.avatar + ')'}"></view>
							<view>{{item.name || item.user_name}}</view>
						</view>
						<block v-if="filterCurrent == 'coinHotel'">
							<view v-if="item.flag == 'success'">佣金:<text>{{item.coin}}</text>纽扣币</view>
							<view v-if="item.flag == 'cancel'">佣金:<text>0.00</text>纽扣币</view>
							<view v-if="item.flag == 'normal'">佣金：待离店后结算</view>
						</block>
						<block v-else>
							<view>佣金:<text>{{item.coin}}</text>纽扣币</view>
						</block>
					</view>
				</view>
			</view>
		</LoadMore>
	</view>
</template>

<script>
	import LoadMore from "@/components/j-loadMore/index.vue";
	export default {
		components: { LoadMore },
		data() {
			return {
				photo: 'https://static.newbeaconhotels.com/app/hotel/my/photo.png', // 默认头像
				filterBar: [
					{ id: 'coinHotel', title: '酒店订单'},
					{ id: 'coinCard', title: '购卡订单'},
					{ id: 'coinShop', title: '商城订单'}
				],
				filterCurrent: 'coinHotel', // 高亮的id
				dataList: [],
				dataInfo: null,
				// 传参数据
				initData: {
					url: 'coinHotel',
					param: {}
				},
			}
		},
		onLoad() {
		},
		methods: {
			// 筛选列表
			filterList (id) {
				this.filterCurrent = id
				this.initData.url = id
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			// LoadMore返回列表数据
			dataRefresh(e){
				this.dataList = e
			},
			// LoadMore返回列表信息
			infoRefresh(e){
				this.dataInfo = e
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
